<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutAdmin}">

<head>
	<meta charset="UTF-8">
	<title>课程目标达成度计算平台</title>
	<style>
		pre {
			  white-space: pre-wrap;			/* 保留空白符序列，并正常进行换行 */
			  white-space: -moz-pre-wrap;		/* 兼容火狐浏览器 */
			  white-space: -webkit-pre-wrap;	/* 兼容谷歌浏览器 */
			  white-space: -o-pre-wrap;			/* 兼容opera浏览器 */
			  word-wrap: break-word;			/* 允许字母、url地址换行 */
		}
	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="10">
				<el-button type="primary" @click="openPaper(null)" >添加命题</el-button>
				<el-table :data="papers" border highlight-current-row style="width: 100%">
					<el-table-column prop="course.courseTitle" label="所属课程">
					</el-table-column>
					<el-table-column prop="paperTitle" label="标题">
					</el-table-column>
					<el-table-column prop="paperRemark" label="备注">
					</el-table-column>
					<el-table-column prop="paperScore" label="总分">
					</el-table-column>
					<el-table-column prop="paperTime" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
					        <el-button @click="showDetail(scope.row)" type="text" size="small">查看题目</el-button>
					        <el-button @click="openPaper(scope.row)" type="text" size="small">修改</el-button>
					        <el-popconfirm title="是否删除？" @confirm="delPaper(scope.row.paperId)" >
							  <el-button slot="reference" type="text" size="small">删除</el-button>
							</el-popconfirm>
					      </template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="14">
				<el-button type="primary" @click="openItem(null)" >添加题目</el-button>
				<el-table :data="items" border highlight-current-row style="width: 100%">
					<el-table-column prop="itemTitle" label="标题">
					</el-table-column>
					<el-table-column prop="itemType" label="题型" width="80px">
						<template slot-scope="scope">
						<el-tag type="info" v-if="scope.row.itemType === 0">选择题</el-tag>
						<el-tag  v-if="scope.row.itemType === 1">填空题</el-tag>
						<el-tag type="warning"  v-if="scope.row.itemType === 2">大题</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="itemScore" label="分值" width="80px">
					</el-table-column>
					<el-table-column prop="itemContent" label="内容" width="80px">
						<template slot-scope="scope">
							<el-button @click="show(scope.row)" type="primary" plain size="small">查看</el-button>
						</template>
					</el-table-column>
					<el-table-column prop="itemAnswer" label="答案">
					</el-table-column>
					<!--<el-table-column prop="itemTime" label="创建时间">
					</el-table-column>-->
					<el-table-column label="操作" width="100px">
						<template slot-scope="scope">
					        <el-button @click="openItem(scope.row)" type="text" size="small">修改</el-button>
					        <el-popconfirm title="是否删除？" @confirm="delItem(scope.row.itemId)" >
							  <el-button slot="reference" type="text" size="small">删除</el-button>
							</el-popconfirm>
					      </template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog
		  title="命题设置"
		  :visible.sync="paperForm.visible"
		  width="30%">
		  <el-form :model="paperForm" :rules="paperRules" ref="paperForm" label-width="100px">
			  <el-form-item label="所属课程" prop="paperCourseId">
			    <el-select v-model="paperForm.paperCourseId" placeholder="请选择">
				    <el-option
				      v-for="item in courses"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
			  </el-form-item>
			  <el-form-item label="标题" prop="paperTitle">
			    <el-input v-model="paperForm.paperTitle"></el-input>
			  </el-form-item>
			  <el-form-item label="备注" prop="paperRemark">
			    <el-input v-model="paperForm.paperRemark"></el-input>
			  </el-form-item>
			  <el-form-item label="总分" prop="paperScore">
			    <el-input v-model="paperForm.paperScore"></el-input>
			  </el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closePaper">取 消</el-button>
		    <el-button type="primary" @click="savePaper">保 存</el-button>
		  </span>
		</el-dialog>
		<el-dialog
		  title="题目设置"
		  :visible.sync="itemForm.visible"
		  width="30%">
		  <el-form :model="itemForm" :rules="itemRules" ref="itemForm" label-width="100px">
			  <el-form-item label="所属命题">
			    {{selectPaper?.paperTitle}}
			  </el-form-item>
			  <el-form-item label="标题" prop="itemTitle">
			    <el-input v-model="itemForm.itemTitle"></el-input>
			  </el-form-item>
			  <el-form-item label="题型" prop="itemType">
			    <el-select v-model="itemForm.itemType" placeholder="请选择">
				    <el-option
				      v-for="item in itemTypes"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
				  </el-select>
			  </el-form-item>
			  <el-form-item label="分数" prop="itemScore">
			    <el-input v-model="itemForm.itemScore"></el-input>
			  </el-form-item>
			  <el-form-item label="内容" prop="itemContent">
			    <el-input
				  type="textarea"
				  placeholder="请输入内容"
				  v-model="itemForm.itemContent"
				  maxlength="500"
				  :autosize="{ minRows: 3, maxRows: 10}"
				  show-word-limit
				>
				</el-input>
			  </el-form-item>
			  <el-form-item label="答案" prop="itemAnswer">
			    <el-input v-model="itemForm.itemAnswer"></el-input>
			  </el-form-item>
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="closeItem">取 消</el-button>
		    <el-button type="primary" @click="saveItem">保 存</el-button>
		  </span>
		</el-dialog>
		<!--查看题目-->
		<el-dialog
		  title="查看题目"
		  :visible.sync="showItem.visible"
		  width="30%">
		  <el-row>
			  <el-col :span="24">
				  题目：
				  <pre style="width:100%">{{showItem?.title}}</pre>
			  </el-col>
			  <el-col :span="24">
				  内容：
				  <pre style="width:100%">{{showItem?.text}}</pre>
			  </el-col>
		  </el-row>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="showItem.visible = false">返回</el-button>
		  </span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		courses: [], 
		papers: [], 
		items: [],
		selectPaper: null,
		itemTypes: itemTypes,
		paperForm:{
			visible: false,
			paperId: '',
			paperCourseId: '',
			paperTitle: '',
			paperRemark: '',
			paperScore: ''
		},
		paperRules: {
          paperCourseId: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          paperTitle: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          paperRemark: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          paperScore: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ]
        },
		itemForm:{
			visible: false,
			itemId: '',  
			itemPaperId: '',  
			itemTitle: '',    
			itemType: '',  
			itemScore: '', 
			itemContent: '', 
			itemAnswer: ''
		},
		itemRules: {
          itemPaperId: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          itemTitle: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          itemType: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          itemScore: [
            { required: true, message: '请输入', trigger: 'blur' },
            { required: true, validator: scoreReg, trigger: "blur" }
          ],
          itemContent: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          itemAnswer: [
            { required: true, message: '请输入', trigger: 'blur' }
          ]
        },
        showItem: {
			visible: false
		}
	}
	let vueMethods = {
		getCourses() {
			let that = this
			postRequst('/admin/getCourses', that.query).then(function (resp) {
				if(resp.rows && resp.rows.length > 0){
					for(course of resp.rows){
						that.courses.push({
							label: course.courseTitle,
							value: course.courseId
						})
					}
				}
			})
		},
		getPapers() {
			let that = this
			postRequst('/admin/getPapers', that.query).then(function (resp) {
				that.papers = resp.rows
				if(resp.rows && resp.rows.length > 0){
					that.selectPaper = resp.rows[0]
					//that.itemForm.itemPaperId = resp.rows[0].paperId
					that.getItems()
				}
			})
		},
		getItems() {
			let that = this
			postRequst('/admin/getItems', {paperId: that.selectPaper.paperId}, true).then(function (resp) {
				that.items = resp.rows
			})
		},
		showDetail(row){
			let that = this
			that.selectPaper = row
			that.getItems()
		},
		openPaper(row){
			let that = this
			if(row){
				that.paperForm.paperId = row.paperId
				that.paperForm.paperCourseId = row.paperCourseId
				that.paperForm.paperTitle = row.paperTitle
				that.paperForm.paperRemark = row.paperRemark
				that.paperForm.paperScore = row.paperScore
			}else{
				that.paperForm.paperId = ''
				that.paperForm.paperCourseId = ''
				that.paperForm.paperTitle = ''
				that.paperForm.paperRemark = ''
				that.paperForm.paperScore = ''
			}
			that.paperForm.visible = true
		},
		closePaper() {
			this.$refs['paperForm'].resetFields();
			this.paperForm.visible = false
		},
		openItem(row){
			let that = this
			if(!that.selectPaper){
				that.$message({message: '请先选择命题', type: "warning"});
				return ;
			}
			if(row){
				that.itemForm.itemId = row.itemId
				that.itemForm.itemPaperId = row.itemPaperId
				that.itemForm.itemTitle = row.itemTitle
				that.itemForm.itemType = row.itemType + ''
				that.itemForm.itemContent = row.itemContent
				that.itemForm.itemScore = row.itemScore
				that.itemForm.itemAnswer = row.itemAnswer
			}else{
				that.itemForm.itemId = ''
				that.itemForm.itemPaperId = that.selectPaper.paperId
				that.itemForm.itemTitle = ''
				that.itemForm.itemType = ''
				that.itemForm.itemContent = ''
				that.itemForm.itemScore = ''
				that.itemForm.itemAnswer = ''
			}
			that.itemForm.visible = true
			
		},
		closeItem() {
			this.$refs['itemForm'].resetFields();
			this.itemForm.visible = false
		},
		savePaper() {
			let that = this
			this.$refs['paperForm'].validate((valid) => {
				if (valid) {
					postRequst('/admin/savePaper', that.paperForm).then(function (resp) {
						if(resp.status == 0){
							that.getPapers()
							that.paperForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						}else{
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		saveItem() {
			let that = this
			this.$refs['itemForm'].validate((valid) => {
				if (valid) {
					postRequst('/admin/saveItem', that.itemForm).then(function (resp) {
						if(resp.status == 0){
							that.getItems()
							that.itemForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						}else{
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delPaper(paperId) {
			let that = this
			postRequst('/admin/delPaper', {paperId: paperId}, true).then(function (resp) {
				if(resp.status == 0){
					that.getPapers()
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		delItem(itemId) {
			let that = this
			postRequst('/admin/delItem', {itemId: itemId}, true).then(function (resp) {
				if(resp.status == 0){
					that.getItems()
					that.$message({message: resp.msg, type: "success"});
				}else{
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		show(row){
			let that = this
			that.showItem.visible = true
			that.showItem.title = row.itemTitle
			that.showItem.text = row.itemContent
		}
	}
	function vueCreated() {
		let that = this
		that.getCourses()
		that.getPapers()
	}

	// 初始化VUE
	new Vue({
		...mainApp, ...{
			created: vueCreated,
			data: {...mainApp.data, ...vueData},
			methods: {...mainApp.methods, ...vueMethods}
		}
	});
</script>

</html>